<template>
  <div class="farmer-info-root flex-row full-container">
    <div v-if="farmerInfo" class="flex-row img-container">
      <el-avatar shape="square" size="large"
                 src="https://img.js.design/assets/smartFill/img313164da746310.jpg"></el-avatar>
    </div>
    <div v-if="farmerInfo" class="txt-container flex-column">
      <div class="title-container flex-row">
        <div class="title-txt">
          {{ (farmerInfo || {}).farmerName }}
        </div>
        <div class="age-txt">
          {{ (farmerInfo || {}).farmerAge }}岁
        </div>
        <div class="farmer-sex-txt">
          <el-image
            :src="(farmerInfo || {}).farmerSex == SEX_CONFIG.GIRL ? girlImg : manImg"
            fit="cover"></el-image>
        </div>
      </div>
      <div class="other-txt-container flex-row">
        <div class="txt-item flex-row">
          <div class="label">
            编号：
          </div>
          <div class="value">
            {{ (farmerInfo || {}).farmerNo }}
          </div>
        </div>
        <div class="txt-item flex-row">
          <div class="label">
            身份证号码：
          </div>
          <div class="value">
            {{ (farmerInfo || {}).farmerIdentity }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="farmerInfo" class="bt-container">
      <el-button class="diy-bt" icon="el-icon-edit-outline" @click="changeFarmer">切 换</el-button>
    </div>
    <div v-if="!farmerInfo">
      <el-button class="diy-bt" icon="el-icon-edit-outline" @click="changeFarmer">选择农户</el-button>
    </div>
  </div>
</template>

<script>
import {SEX_CONFIG} from "@/views/business/constantData";

export default {
  props: {
    farmerInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      SEX_CONFIG,
      manImg: require("@/assets/images/business/public/nan.png"),
      girlImg: require("@/assets/images/business/public/nv.png"),
    }
  },
  methods: {
    changeFarmer() {
      this.$emit('changeFarmer')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
